@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary-color: #3B82F6;
    --secondary-color: #6366F1;
    --accent-color: #8B5CF6;
    --background-color: #1E293B;
    --text-color: #F1F5F9;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

.container-card {
    @apply bg-gray-900/50 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden border border-blue-500/10 hover:border-blue-500/30 transition-all duration-300;
}

.btn-icon {
    @apply p-2 rounded transition-all duration-200 hover:shadow-lg;
}

.status-indicator {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.running-dot {
    @apply bg-green-500;
    box-shadow: 0 0 8px theme('colors.green.500');
}

.stopped-dot {
    @apply bg-red-500;
    box-shadow: 0 0 8px theme('colors.red.500');
}

.paused-dot {
    @apply bg-yellow-500;
    box-shadow: 0 0 8px theme('colors.yellow.500');
}

.creating-dot {
    @apply bg-blue-500;
    box-shadow: 0 0 8px theme('colors.blue.500');
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 动画背景 */
.bg-grid {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.bg-stars {
    background-image: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px),
        radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px),
        radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
}

/* 加载动画 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* 错误提示 */
.error-toast {
    @apply fixed top-4 right-4 bg-red-500/90 text-white px-4 py-2 rounded-lg shadow-lg z-50;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 加载遮罩 */
.loading-overlay {
    @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
}

/* 表格样式 */
.table-hover-effect tr {
    @apply transition-colors duration-200;
}

.table-hover-effect tr:hover {
    @apply bg-gray-700/30;
}

/* 按钮悬停效果 */
.hover-scale {
    @apply transition-transform duration-300;
}

.hover-scale:hover {
    @apply transform scale-105;
}

/* 渐变文本 */
.gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400;
} 